<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item prop="plotId" label="选择小区：">
        <el-select v-model="queryParams.plotId" placeholder="请选择小区名称" clearable @change="xiaoquChange">
          <el-option v-for="dict in xiaoquData" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item prop="buildId" label="选择楼栋：">
        <el-select v-model="queryParams.buildId" placeholder="请选择楼栋" clearable @change="loudonChange">
          <el-option v-for="dict in loudongData" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <el-form-item prop="unitId" label="选择单元：">
        <el-select v-model="queryParams.unitId" placeholder="请选择单元" clearable @change="unitChange">
          <el-option v-for="dict in danyuanData" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <div>
      <el-form id="search" v-loading="loading" class="multiple-from search" :model="infoData" ref="infoDataForm"
        :rules="rules" size="small" :inline="true" label-width="160px" label-position="left">
        <div class="fromRow">
          <el-form-item label="调控方法" prop="regulationMethod">
            <el-select v-model="infoData.regulationMethod" placeholder="请选择" clearable>
              <el-option v-for="dict in dict.type.control_method" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>

          <el-form-item label="调控策略" prop="controlStrategy">
            <el-select v-model="infoData.controlStrategy" placeholder="请选择调控策略" clearable>
              <el-option v-for="dict in dict.type.control_tactics" :key="dict.value" :label="dict.label"
                :value="dict.value" />
            </el-select>
          </el-form-item>

          <el-form-item v-if="type == 1" label="优先级" prop="priority">
            <el-select v-model="infoData.priority" placeholder="请选择优先级" clearable>
              <el-option v-for="dict in prioritys" :key="dict.value" :label="dict.label" :value="dict.value" />
            </el-select>
          </el-form-item>
        </div>

        <div class="fromRow">
          <el-form-item label="楼栋阀门默认值" prop="buildingValveOpen">
            <el-input v-model="infoData.buildingValveOpen" placeholder="0-100"></el-input>
          </el-form-item>

          <el-form-item label="阀门调整步进值" prop="stepValue">
            <el-input v-model="infoData.stepValue" placeholder="请输入阀门调整步进值"></el-input>
          </el-form-item>
        </div>

        <div class="fromRow">
          <el-form-item label="单元阀门默认值" prop="unitValveOpen">
            <el-input v-model="infoData.unitValveOpen" placeholder="0-100"></el-input>
          </el-form-item>
        </div>
        <div class="fromRow">
          <el-form-item label="住户阀门默认值" prop="householdValveOpen">
            <el-input v-model="infoData.householdValveOpen" placeholder="0-100"></el-input>
          </el-form-item>
        </div>

        <div v-if="infoData.controlStrategy == 1" class="fromRow">
          <el-form-item label="回水温度目标值" prop="returnWaterTemperature">
            <el-input type="number" v-model="infoData.returnWaterTemperature" placeholder="回水温度目标值"></el-input>
          </el-form-item>

          <el-form-item label="回水温度波动值" prop="returnWaterTemperatureFluctuating">
            <el-input type="number" v-model="infoData.returnWaterTemperatureFluctuating" placeholder="回水温度波动值"></el-input>
          </el-form-item>

          <el-form-item label="回水温度波动范围">
            <el-input :value="returnWaterTemperatureRange" disabled type="text" placeholder="回水温度波动范围"></el-input>
          </el-form-item>

          <!-- <el-form-item label="回水温度异常最小值" prop="returnWaterMinValue">
            <el-input v-model="infoData.returnWaterMinValue" type="number" placeholder="回水温度异常最小值"></el-input>
          </el-form-item>

          <el-form-item label="回水温度异常最大值" prop="returnWaterMaxValue">
            <el-input v-model="infoData.returnWaterMaxValue" type="number" placeholder="回水温度异常最大值"></el-input>
          </el-form-item> -->
        </div>

        <div v-else-if="infoData.controlStrategy == 3" class="fromRow">
          <el-form-item label="供回水平均温度目标值" prop="farReturnTemperature">
            <el-input type="number" v-model="infoData.farReturnTemperature" placeholder="供回水平均温度目标值"></el-input>
          </el-form-item>

          <el-form-item label="供回水平均温度波动值" prop="farReturnTemperatureFluctuating">
            <el-input type="number" v-model="infoData.farReturnTemperatureFluctuating"
              placeholder="供回水平均温度波动值"></el-input>
          </el-form-item>

          <el-form-item label="供回水平均温度波动范围" prop="farReturnTemperatureFluctuating">
            <el-input disabled :value="farReturnTemperatureRange" type="text" placeholder="供回水平均温度波动范围"></el-input>
          </el-form-item>

          <!-- <el-form-item label="供回水平均温度异常最小值" prop="farReturnMinValue">
            <el-input v-model="infoData.farReturnMinValue" type="number" placeholder="供回水平均温度异常最小值"></el-input>
          </el-form-item>

          <el-form-item label="供回水平均温度异常最大值" prop="farReturnMaxValue">
            <el-input v-model="infoData.farReturnMaxValue" type="number" placeholder="供回水平均温度异常最大值"></el-input>
          </el-form-item> -->
        </div>

        <div v-else-if="infoData.controlStrategy == 2" class="fromRow">
          <el-form-item label="室内温度目标值" prop="targetRoomTemperature">
            <el-input type="number" v-model="infoData.targetRoomTemperature" placeholder="室内温度目标值"></el-input>
          </el-form-item>
          <!-- v-if="infoData.regulationMethod === '1'" -->
          <el-form-item label="室内温度波动值" prop="targetRoomTemperatureFluctuating">
            <el-input type="number" v-model="infoData.targetRoomTemperatureFluctuating" placeholder="室内温度波动值"></el-input>
          </el-form-item>

          <el-form-item label="室内温度波动范围">
            <el-input :value="targetRoomRange" disabled type="text" placeholder="室内温度波动范围"></el-input>
          </el-form-item>

          <!-- <el-form-item label="室内温度异常最小值" prop="targetRoomMinValue">
            <el-input v-model="infoData.targetRoomMinValue" type="number" placeholder="室内温度异常最小值"></el-input>
          </el-form-item>

          <el-form-item label="室内温度异常最大值" prop="targetRoomMaxValue">
            <el-input v-model="infoData.targetRoomMaxValue" type="number" placeholder="室内温度异常最大值"></el-input>
          </el-form-item> -->
        </div>

        <div v-else-if="infoData.controlStrategy == 4" class="fromRow">
          <el-form-item label="流量目标值" prop="velocityFlow">
            <el-input type="number" v-model="infoData.velocityFlow" placeholder="流量目标值"></el-input>
          </el-form-item>

          <!-- v-if="infoData.regulationMethod === '1'" -->
          <el-form-item label="流量目标波动值" prop="velocityFlowFluctuating">
            <el-input type="number" v-model="infoData.velocityFlowFluctuating" placeholder="流量目标波动值"></el-input>
          </el-form-item>

          <el-form-item label="流量波动范围">
            <el-input disabled :value="velocityFlowRange" type="text" placeholder="流量波动范围"></el-input>
          </el-form-item>

          <!-- <el-form-item label="流量目标异常最小值" prop="velocityFlowMinValue">
            <el-input v-model="infoData.velocityFlowMinValue" type="number" placeholder="流量目标异常最小值"></el-input>
          </el-form-item>

          <el-form-item label="流量目标异常最大值" prop="velocityFlowMaxValue">
            <el-input v-model="infoData.velocityFlowMaxValue" type="number" placeholder="流量目标异常最大值"></el-input>
          </el-form-item> -->
        </div>

        <div v-else-if="infoData.controlStrategy == 5" class="fromRow">
          <el-form-item label="热量目标值" prop="heat">
            <el-input type="number" v-model="infoData.heat" placeholder="热量目标值"></el-input>
          </el-form-item>

          <!-- v-if="infoData.regulationMethod === '1'" -->
          <el-form-item label="热量波动值" prop="heatFluctuating">
            <el-input type="number" v-model="infoData.heatFluctuating" placeholder="热量波动值"></el-input>
          </el-form-item>

          <el-form-item label="热量目标值波动范围">
            <el-input :value="heatRange" disabled type="text" placeholder="热量目标值波动范围"></el-input>
          </el-form-item>

          <!-- <el-form-item label="热量目标异常最小值" prop="heatMinValue">
            <el-input v-model="infoData.heatMinValue" type="number" placeholder="热量目标异常最小值"></el-input>
          </el-form-item>

          <el-form-item label="热量目标异常最大值" prop="heatMaxValue">
            <el-input v-model="infoData.heatMaxValue" type="number" placeholder="热量目标异常最大值"></el-input>
          </el-form-item> -->
        </div>
      </el-form>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button :disabled="loading" size="medium" type="primary" @click="submitFormGroups">确 定</el-button>
    </div>
  </div>
</template>

<script>
import {
  listCPlotSelect,
  listBuildSelect,
  listBuildUnitSelect,
} from "@/api/system/utils";
import {
  getDataSetInfo,
  addDataSet,
  editDataSet,
} from "@/api/dataSettings/dataSetting";

export default {
  dicts: ["control_tactics", "control_method"],
  data() {
    return {
      showSearch: true,
      tiaokongCelue: [
        {
          label: "回水温度",
          value: 1,
          ruleNames: [
            "returnWaterTemperature",
            "returnWaterTemperatureFluctuating",
            "returnWaterMinValue",
            "returnWaterMaxValue",
          ],
        },
        {
          label: "室内温度",
          value: 2,
          ruleNames: [
            "targetRoomTemperature",
            "targetRoomTemperatureFluctuating",
            "targetRoomMinValue",
            "targetRoomMaxValue",
          ],
        },
        {
          label: "供回水平均温度",
          value: 3,
          ruleNames: [
            "farReturnTemperature",
            "farReturnTemperatureFluctuating",
            "farReturnMinValue",
            "farReturnMaxValue",
          ],
        },
        {
          label: "流量",
          value: 4,
          ruleNames: [
            "velocityFlow",
            "velocityFlowFluctuating",
            "velocityFlowMinValue",
            "velocityFlowMaxValue",
          ],
        },
        {
          label: "热量",
          value: 5,
          ruleNames: [
            "heat",
            "heatFluctuating",
            "heatMinValue",
            "heatMaxValue",
          ],
        },
      ],
      tiaokongData: [
        { label: "手动调控", value: 0 },
        { label: "自动调控", value: 1 },
      ],
      // 小区列表
      xiaoquData: [],
      // 楼栋列表
      loudongData: [],
      prioritys: [
        { label: "楼栋", value: 1 },
        { label: "单元", value: 2 },
      ],
      danyuanData: [],
      queryParams: {
        buildId: null,
        plotId: null,
        unitId: null,
      },
      infoData: {
        id: null,
        // 类型（1：小区 2：楼栋 3：单元）
        type: 0,
        // 优先级（1：楼栋 2：单元）
        priority: null,
        // 热量目标
        heat: null,
        heatFluctuating: null,
        heatMinValue: null,
        heatMaxValue: null,
        // 室内温度目标值
        targetRoomTemperature: null,
        targetRoomTemperatureFluctuating: null,
        targetRoomMinValue: null,
        targetRoomMaxValue: null,
        // 回水温度目标
        returnWaterTemperature: null,
        returnWaterTemperatureFluctuating: null,
        returnWaterMinValue: null,
        returnWaterMaxValue: null,
        // 小区id
        plotId: null,
        // 楼栋id
        buildId: null,
        // 单元id
        unitId: null,
        // 调控方法（1：手动调控 2：自动调控）
        regulationMethod: null,
        // 调控策略
        controlStrategy: null,
        // 楼栋阀门默认开度
        buildingValveOpen: null,
        // 阀门调整步进值
        stepValue: null,
        // 单元阀门默认开度
        unitValveOpen: null,
        // 住户阀门默认开度
        householdValveOpen: null,
        // 供回水平均温度
        farReturnTemperature: null,
        farReturnTemperatureFluctuating: null,
        farReturnMinValue: null,
        farReturnMaxValue: null,
        // 流量目标值
        velocityFlow: null,
        velocityFlowFluctuating: null,
        velocityFlowMinValue: null,
        velocityFlowMaxValue: null,
      },
      rules: {
        regulationMethod: [
          { required: true, message: "请选择调控方法", trigger: "blur" },
        ],
        controlStrategy: [
          { required: true, message: "请选择调控策略", trigger: "blur" },
        ],
        buildingValveOpen: [
          { required: true, message: "请选择楼栋阀门默认值", trigger: "blur" },
        ],
        stepValue: [
          { required: true, message: "请输入阀门调整步进值", trigger: "blur" },
        ],
        unitValveOpen: [
          { required: true, message: "请选择单元阀门默认值", trigger: "blur" },
        ],
        householdValveOpen: [
          { required: true, message: "请选择住户阀门默认值", trigger: "blur" },
        ],
        returnWaterTemperature: [
          { required: false, message: "请输入回水温度目标值", trigger: "blur" },
        ],
        returnWaterTemperatureFluctuating: [
          {
            required: false,
            message: "请输入回水温度目标波动值",
            trigger: "blur",
          },
        ],
        // returnWaterMinValue: [
        //   {
        //     required: false,
        //     message: "请输入回水温度异常最小值",
        //     trigger: "blur",
        //   },
        // ],
        // returnWaterMaxValue: [
        //   {
        //     required: false,
        //     message: "请输入回水温度异常最大值",
        //     trigger: "blur",
        //   },
        // ],
        farReturnTemperature: [
          {
            required: false,
            message: "请输入供回水平均温度目标值",
            trigger: "blur",
          },
        ],
        farReturnTemperatureFluctuating: [
          {
            required: false,
            message: "请输入供回水平均温度波动值",
            trigger: "blur",
          },
        ],
        // farReturnMinValue: [
        //   {
        //     required: false,
        //     message: "请输入供回水平均温度异常最小值",
        //     trigger: "blur",
        //   },
        // ],
        // farReturnMaxValue: [
        //   {
        //     required: false,
        //     message: "请输入供回水平均温度异常最大值",
        //     trigger: "blur",
        //   },
        // ],
        targetRoomTemperature: [
          { required: false, message: "请输入室内温度目标值", trigger: "blur" },
        ],
        targetRoomTemperatureFluctuating: [
          {
            required: false,
            message: "请输入室内温度目标波动值",
            trigger: "blur",
          },
        ],
        // targetRoomMinValue: [
        //   {
        //     required: false,
        //     message: "请输入室内温度异常最小值",
        //     trigger: "blur",
        //   },
        // ],
        // targetRoomMaxValue: [
        //   {
        //     required: false,
        //     message: "请输入室内温度异常最大值",
        //     trigger: "blur",
        //   },
        // ],
        velocityFlow: [
          { required: false, message: "请输入流量目标值", trigger: "blur" },
        ],
        velocityFlowFluctuating: [
          { required: false, message: "请输入流量目标波动值", trigger: "blur" },
        ],
        // velocityFlowMaxValue: [
        //   {
        //     required: false,
        //     message: "请输入流量目标异常最大值",
        //     trigger: "blur",
        //   },
        // ],
        // velocityFlowMinValue: [
        //   {
        //     required: false,
        //     message: "请输入流量目标异常最小值",
        //     trigger: "blur",
        //   },
        // ],
        heat: [
          { required: false, message: "请输入热量目标值", trigger: "blur" },
        ],
        heatFluctuating: [
          { required: false, message: "请输入热量目标波动值", trigger: "blur" },
        ],
        // heatMinValue: [
        //   {
        //     required: false,
        //     message: "请输入热量目标异常最小值",
        //     trigger: "blur",
        //   },
        // ],
        // heatMaxValue: [
        //   {
        //     required: false,
        //     message: "请输入热量目标异常最大值",
        //     trigger: "blur",
        //   },
        // ],
        priority: [
          { required: true, message: "请选择优先级", trigger: "blur" },
        ],
      },
      type: "0",
      loading: false,
    };
  },
  watch: {
    "infoData.controlStrategy": {
      handler(n, o) {
        let val1 = this.tiaokongCelue.find((item) => item.value == n);
        let val2 = this.tiaokongCelue.find((item) => item.value == o);
        for (const key in this.rules) {
          if (val1 && val1.ruleNames.includes(key)) {
            this.rules[key].forEach((element) => {
              element.required = true;
            });
          } else if (val2 && val2.ruleNames.includes(key)) {
            this.rules[key].forEach((element) => {
              element.required = false;
            });
          }
        }
      },
      deep: true,
    },
  },
  computed: {
    heatRange() {
      let number = Number(this.infoData.heat);
      let fluctua = Number(this.infoData.heatFluctuating);
      if (number && fluctua) {
        return number - fluctua + "-" + (number + fluctua);
      } else {
        return "";
      }
    },
    targetRoomRange() {
      let number = Number(this.infoData.targetRoomTemperature);
      let fluctua = Number(this.infoData.targetRoomTemperatureFluctuating);
      if (number && fluctua) {
        return number - fluctua + "-" + (number + fluctua);
      } else {
        return "";
      }
    },
    velocityFlowRange() {
      let number = Number(this.infoData.velocityFlow);
      let fluctua = Number(this.infoData.velocityFlowFluctuating);
      if (number && fluctua) {
        return number - fluctua + "-" + (number + fluctua);
      } else {
        return "";
      }
    },
    farReturnTemperatureRange() {
      let number = Number(this.infoData.farReturnTemperature);
      let fluctua = Number(this.infoData.farReturnTemperatureFluctuating);
      if (number && fluctua) {
        return number - fluctua + "-" + (number + fluctua);
      } else {
        return "";
      }
    },
    returnWaterTemperatureRange() {
      let number = Number(this.infoData.returnWaterTemperature);
      let fluctua = Number(this.infoData.returnWaterTemperatureFluctuating);
      if (number && fluctua) {
        return number - fluctua + "-" + (number + fluctua);
      } else {
        return "";
      }
    },
  },
  created() {
    listCPlotSelect({}).then((res) => {
      this.xiaoquData = res.rows;
    });
  },
  methods: {
    // 选择小区
    xiaoquChange(id) {
      this.danyuanData = [];
      this.loudongData = []
      this.queryParams.buildId = null;
      this.queryParams.unitId = null;
      this.infoData.priority = null
      this.type = "0";
      if (id) {
        listBuildSelect({ plotId: id }).then((res) => {
          this.loudongData = res.rows;
        });
        this.getFormData();
      } else {
        for (const key in this.infoData) {
          this.infoData[key] = null
        }
      }
    },
    // 选择楼栋
    loudonChange(id) {
      this.queryParams.unitId = null;
      this.danyuanData = []
      if (id) {
        this.type = "1"
        listBuildUnitSelect({ buildId: id }).then((res) => {
          this.danyuanData = res.rows;
        });
      } else {
        this.type = "0"
      }
      this.getFormData();
    },
    // 选择单元
    unitChange(e) {
      if (e) {
        this.type = "2";
      } else {
        this.type = "1";
      }
      this.infoData.priority = null
      this.getFormData();
    },
    // 搜索按钮操作
    handleQuery() {
      this.type = "0";
      if (this.queryParams.plotId == null || this.queryParams.plotId == "") {
        this.$message.error("请先选择小区");
        return;
      }
      if (this.queryParams.buildId != null && this.queryParams.buildId != "") {
        this.type = "1";
      }
      if (this.queryParams.unitId == null && this.queryParams.unitId == "") {
        this.type = "2";
      }
      this.queryParams.type = this.type;
      this.getFormData();
    },
    //获取表单数据
    getFormData() {
      this.loading = true;
      this.queryParams.type = this.type;
      getDataSetInfo(this.queryParams).then((res) => {
        this.infoData = res.data;
        this.infoData.type = this.type;
        this.loading = false;
      }, err => {
        this.loading = false;
      });
    },
    // 重置
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.type = this.type;
    },
    //提交
    submitFormGroups() {
      if (!this.queryParams.plotId) {
        this.$message.error("请选择小区");
        return;
      }
      this.infoData.type = this.type;
      this.$refs["infoDataForm"].validate((valid) => {
        if (valid) {
          this.infoData.plotId = this.queryParams.plotId;
          if (this.queryParams.buildId != null) {
            this.infoData.buildId = this.queryParams.buildId;
          }
          if (this.queryParams.unitId != null) {
            this.infoData.unitId = this.queryParams.unitId;
          }
          this.loading = true;
          if (this.infoData.id) {
            editDataSet(this.infoData).then((response) => {
              this.$modal.msgSuccess("保存成功");
              this.loading = false;
            }, err => {
              this.loading = false;
            });
          } else {
            addDataSet(this.infoData).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.loading = false;
              this.getFormData()
            }, err => {
              this.loading = false;
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
#search.el-form.search.multiple-from {
  padding-right: 0 !important;
  margin-top: 20px;
  height: auto;
  background-color: transparent !important;

  .el-form-item {
    margin-top: 20px;
    margin-right: 0;
  }

  .el-form-item:last-child {
    position: relative !important;
    right: 0px !important;
  }

}

::v-deep .el-form-item__error {
  width: 110% !important;
}

::v-deep .el-form-item .el-form-item__label {
  color: #fff;

}

.dialog-footer {
  display: flex;
  justify-content: center;

}

.fromRow {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding-left: 20px;
  margin-bottom: 20px;

  .el-form-item {
    min-width: 33.33%;
    padding-right: 50px !important;
    box-sizing: border-box;
  }
}
</style>
